<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


<jsp:include page="../template/includes.jsp"></jsp:include>
<jsp:include page="../cidade/editarCidade.jsp"></jsp:include>

<link rel="stylesheet" type="text/css" href="../../static/styles/home.css">
<body style="background: #6C7B8B;">
	<div class="template-cadastro">
		<div style="width: 250px; margin-left: 10px; margin-top: 10px;"> 
			<div style="margin-bottom: 5px;">Cidade*</div>
			<input  type="text" id="pesquisar-cidade" style="height: 20px; width: 250px;">
			<button class="default-button" id="btn-pesquisar-cidade" style="font-size: 12px; margin-left: 260px; margin-top: -28px; width: 80px;">Pesquisar</button>
		</div>
		
		<div style="margin-left: 50px; margin-top: 30px;" >
			<table id= "grid-cidade"></table>
		</div>
		
		<div class="popup-buttons-container" style="text-align: center;margin-bottom: -13px;">	
			<button class="default-button" id="btn-novo-cidade" style="font-size: 12px; margin-right: 10px; width: 80px;">Novo</button>
			<button class="default-button" id="btn-editar-cidade" style="font-size: 12px; margin-right: 10px; width: 80px;">Editar</button>
			<button class="default-button" id="btn-excluir-cidade" style="font-size: 12px; margin-right: 10px; width: 80px;">Excluir</button>
			<button class="default-button" id="btn-sair-cidade" style="font-size: 12px; width: 80px;">Sair</button>
		</div>		
		
	</div>

</body>	
	<script type="text/javascript">
	
	$("#grid-cidade").jqGrid({
		datatype: "local", 
		colNames:['Codigo','Cidade', 'Estado', 'Pais'], 
		colModel:[
		{ name: 'idCidade', index: 'idCidade', width: 50 },
		{ name: 'descricao', index: 'descricao', width: 200 },
		{ name: 'estado.descricao', index: 'estado.descricao', width: 50 },
		{ name: 'estado.pais.descricao', index: 'estado.pais.descricao', width: 50 },
		],
		rowNum:100, 
		rowList:[100,200,300], 
		viewrecords: true, 
		width: 650,
		multiselect: false,
		height: 350,
		scroll: true
		});
	
	CidadeController.listarCidade({
		callback: function(result){
			for(var i=0;i<=result.length;i++){
				$("#grid-cidade").addRowData(i+1,result[i]);
			}
		}
	});
	
	$("#btn-editar-cidade").click(function() {
		var rowidCidade = $("#grid-cidade").jqGrid('getGridParam','selrow');
		var rowData = $("#grid-cidade").getRowData( rowidCidade );
		
		if (rowData.idCidade != null) 
		{
			CidadeController.getCidadeById( rowData.idCidade,{
					callback: function(result){
						
						$("#id-cidade").val(result.idCidade);
						$("#desc-cidade").val(result.descricao);
						$("#ddd-cidade").val(result.ddd);
						$("#id-estado-cidade").val(result.estado.idEstado);
						$("#desc-estado-cidade").val(result.estado.descricao);
						$("#desc-pais-estado-cidade").val(result.estado.pais.descricao);
						$("#datacadastro-cidade").val(result.datacadastro);
			 			$("#dataalteracao-cidade").val(result.dataalteracao);
					}
				});
			
			$("#editar-cidade").dialog("open");
		
			$("#btn-salvar-cidade").css("display","none");
			$("#btn-alterar-cidade").css("display","block");
		}
		
	});
	
	$("#btn-excluir-cidade").click(function() {
		var rowidCidade = $("#grid-cidade").jqGrid('getGridParam','selrow');
		var rowData = $("#grid-cidade").getRowData( rowidCidade );
		
		if (rowData.idCidade != null) 
		{
			CidadeController.getCidadeById( rowData.idCidade,{
					callback: function(result){
						
						$("#id-cidade").val(result.idCidade);
						$("#desc-cidade").val(result.descricao);
						$("#ddd-cidade").val(result.ddd);
						$("#id-estado-cidade").val(result.estado.idEstado);
						$("#desc-estado-cidade").val(result.estado.descricao);
						$("#desc-pais-estado-cidade").val(result.estado.pais.descricao);
						$("#datacadastro-cidade").val(result.datacadastro);
			 			$("#dataalteracao-cidade").val(result.dataalteracao);
						
					}
				});
			
			$("#editar-cidade").dialog("open");
		
			$("#desc-cidade").attr("disabled","disabled");
			$("#ddd-cidade").attr("disabled","disabled");
			
			$("#btn-salvar-cidade").css("display","none");
			$("#btn-alterar-cidade").css("display","none");
			$("#btn-deletar-cidade").css("display","block");
		}
	});
	
		$("#btn-novo-cidade").click(function() {
			$("#editar-cidade").dialog("open");
			$("#btn-alterar-cidade").css("display", "none");
			$("#btn-salvar-cidade").css("display", "block");
			$("#btn-deletar-cidade").css("display", "none");
		});
		
		$("#btn-sair-cidade").click(function() {
			location.href = "http://localhost:8080/project-mega-visao/appweb/development/index.jsp";
		});
		

		function atualizaGrid () {
			
			$("#grid-cidade").jqGrid('clearGridData');
			
			CidadeController.listarCidade({
				callback: function(result)
				{
					for(var i=0;i<=result.length;i++)
					{
						$("#grid-cidade").addRowData(i+1,result[i]);
					}
				}
			});
		}
		
		$("#btn-salvar-cidade").click(function () {
			atualizaGrid();
		});
		
		$("#btn-editar-cidade").click(function () {
			atualizaGrid();			
		});
	$("#btn-pesquisar-cidade").click(function() {
			
			if( $("#pesquisar-cidade").val() == "")
			{
				$("#grid-cidade").jqGrid('clearGridData');
				 
				 CidadeController.listarCidade({
						callback: function(result)
						{
							for(var i=0;i<=result.length;i++)
							{
								$("#grid-cidade").addRowData(i+1,result[i]);
							}
						}
				});
			}
			else
			{
				$("#grid-cidade").jqGrid('clearGridData');
				 
				 CidadeController.listarCidade({
						callback: function(result)
						{
							for(var i=0;i<=result.length;i++)
							{
								if( $("#pesquisar-cidade").val() == result[i].cidade)
								{
									$("#grid-cidade").addRowData(i+1,result[i]);
								}
							}
						}
				});
			}
		});
	
	</script>
	
